<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Metronic Admin Theme #1 | Form Layouts</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Preview page of Metronic Admin Theme #1 for form layouts" name="description" />
    <meta content="" name="author" />
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../assets/custom/css/iconfont.css"/>
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />


    <link href="../assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>

<body>
<div class="portlet light">
    <div class="portlet-title tabbable-line">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#portlet_tab1" data-toggle="tab">全部 </a>
            </li>
            <li>
                <a href="#portlet_tab2" data-toggle="tab">归集 </a>
            </li>
            <li >
                <a href="#portlet_tab3" data-toggle="tab"> 标准化</a>
            </li>
            <li >
                <a href="#portlet_tab4" data-toggle="tab"> 集成 </a>
            </li>
            <li>
                <a href="#portlet_tab5" data-toggle="tab"> 统计预处理 </a>
            </li>
            <li >
                <a href="#portlet_tab6" data-toggle="tab"> 共享输出 </a>
            </li>
        </ul>
    </div>
    <div class="portlet-body">
        <div class="tab-content">
            <div class="tab-pane active" id="portlet_tab1">
                <div class="from_control clearfix">
                    <div class="from_control_l">
                        <div class="select_drop_box">
                            <span class="label_on fl">来源数据源：</span>
                            <div class="select_drop fl">
                                <select id="samll" class="form-control select2">
                                    <optgroup label="Alaskan">
                                        <option value="AK">Alaska</option>
                                        <option value="HI" disabled="disabled">Hawaii</option>
                                    </optgroup>
                                    <optgroup label="Pacific Time Zone">
                                        <option value="CA">California</option>
                                        <option value="NV">Nevada</option>
                                        <option value="OR">Oregon</option>
                                        <option value="WA">Washington</option>
                                    </optgroup>
                                    <optgroup label="Mountain Time Zone">
                                        <option value="AZ">Arizona</option>
                                        <option value="CO">Colorado</option>
                                        <option value="ID">Idaho</option>
                                        <option value="MT">Montana</option>
                                        <option value="NE">Nebraska</option>
                                        <option value="NM">New Mexico</option>
                                        <option value="ND">North Dakota</option>
                                        <option value="UT">Utah</option>
                                        <option value="WY">Wyoming</option>
                                    </optgroup>
                                    <optgroup label="Central Time Zone">
                                        <option value="AL">Alabama</option>
                                        <option value="AR">Arkansas</option>
                                        <option value="IL">Illinois</option>
                                        <option value="IA">Iowa</option>
                                        <option value="KS">Kansas</option>
                                        <option value="KY">Kentucky</option>
                                        <option value="LA">Louisiana</option>
                                        <option value="MN">Minnesota</option>
                                        <option value="MS">Mississippi</option>
                                        <option value="MO">Missouri</option>
                                        <option value="OK">Oklahoma</option>
                                        <option value="SD">South Dakota</option>
                                        <option value="TX">Texas</option>
                                        <option value="TN">Tennessee</option>
                                        <option value="WI">Wisconsin</option>
                                    </optgroup>
                                    <optgroup label="Eastern Time Zone">
                                        <option value="CT">Connecticut</option>
                                        <option value="DE">Delaware</option>
                                        <option value="FL">Florida</option>
                                        <option value="GA">Georgia</option>
                                        <option value="IN">Indiana</option>
                                        <option value="ME">Maine</option>
                                        <option value="MD">Maryland</option>
                                        <option value="MA">Massachusetts</option>
                                        <option value="MI">Michigan</option>
                                        <option value="NH">New Hampshire</option>
                                        <option value="NJ">New Jersey</option>
                                        <option value="NY">New York</option>
                                        <option value="NC">North Carolina</option>
                                        <option value="OH">Ohio</option>
                                        <option value="PA">Pennsylvania</option>
                                        <option value="RI">Rhode Island</option>
                                        <option value="SC">South Carolina</option>
                                        <option value="VT">Vermont</option>
                                        <option value="VA">Virginia</option>
                                        <option value="WV">West Virginia</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                        <div class="select_drop_box">
                            <span class="label_on fl">目标数据源：</span>
                            <div class="select_drop fl">
                                <select id="select2-single-input-sm" class="form-control select2">
                                    <optgroup label="Alaskan">
                                        <option value="AK">Alaska</option>
                                        <option value="HI" disabled="disabled">Hawaii</option>
                                    </optgroup>
                                    <optgroup label="Pacific Time Zone">
                                        <option value="CA">California</option>
                                        <option value="NV">Nevada</option>
                                        <option value="OR">Oregon</option>
                                        <option value="WA">Washington</option>
                                    </optgroup>
                                    <optgroup label="Mountain Time Zone">
                                        <option value="AZ">Arizona</option>
                                        <option value="CO">Colorado</option>
                                        <option value="ID">Idaho</option>
                                        <option value="MT">Montana</option>
                                        <option value="NE">Nebraska</option>
                                        <option value="NM">New Mexico</option>
                                        <option value="ND">North Dakota</option>
                                        <option value="UT">Utah</option>
                                        <option value="WY">Wyoming</option>
                                    </optgroup>
                                    <optgroup label="Central Time Zone">
                                        <option value="AL">Alabama</option>
                                        <option value="AR">Arkansas</option>
                                        <option value="IL">Illinois</option>
                                        <option value="IA">Iowa</option>
                                        <option value="KS">Kansas</option>
                                        <option value="KY">Kentucky</option>
                                        <option value="LA">Louisiana</option>
                                        <option value="MN">Minnesota</option>
                                        <option value="MS">Mississippi</option>
                                        <option value="MO">Missouri</option>
                                        <option value="OK">Oklahoma</option>
                                        <option value="SD">South Dakota</option>
                                        <option value="TX">Texas</option>
                                        <option value="TN">Tennessee</option>
                                        <option value="WI">Wisconsin</option>
                                    </optgroup>
                                    <optgroup label="Eastern Time Zone">
                                        <option value="CT">Connecticut</option>
                                        <option value="DE">Delaware</option>
                                        <option value="FL">Florida</option>
                                        <option value="GA">Georgia</option>
                                        <option value="IN">Indiana</option>
                                        <option value="ME">Maine</option>
                                        <option value="MD">Maryland</option>
                                        <option value="MA">Massachusetts</option>
                                        <option value="MI">Michigan</option>
                                        <option value="NH">New Hampshire</option>
                                        <option value="NJ">New Jersey</option>
                                        <option value="NY">New York</option>
                                        <option value="NC">North Carolina</option>
                                        <option value="OH">Ohio</option>
                                        <option value="PA">Pennsylvania</option>
                                        <option value="RI">Rhode Island</option>
                                        <option value="SC">South Carolina</option>
                                        <option value="VT">Vermont</option>
                                        <option value="VA">Virginia</option>
                                        <option value="WV">West Virginia</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                        <div class="demoTable">
                            <div class="layui-inline data_search fl">
                                <input class="inputSmall" name="id" id="demoReload" autocomplete="off">
                            </div>
                            <button class="btn layui-btn blue-hoki fl" data-type="reload">搜索</button>
                        </div>
                    </div>
                    <div class="from_control_r">
                        <button class="btn default">流程同步到引擎节点</button>
                        <button class="btn default">批量启动</button>
                        <div class="btn-group">
                            <a href="" class="btn dark btn-outline btn-circle btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">新增向导
                                <span class="fa fa-angle-down"> </span>
                            </a>
                            <ul class="dropdown-menu pull-right">
                                <li>
                                    <a href="javascript:;" class="process_tb_copy"> 表单复制

                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="process_tb_map"> 表映射

                                    </a>
                                </li>
                                <li >
                                    <a href="javascript:;"> join集成

                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <table class="layui-table" id="LAY_table_user" lay-filter="user"></table>

            </div>
            <div class="tab-pane" id="portlet_tab2">
                <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
                    ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                    et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo. </p>
                <p>
                    <a class="btn red" href="ui_tabs_accordions_navs.html#portlet_tab2" target="_blank"> Activate this tab via URL </a>
                </p>
            </div>
            <div class="tab-pane" id="portlet_tab3">
                <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
                    consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
                <p>
                    <a class="btn blue" href="ui_tabs_accordions_navs.html#portlet_tab3" target="_blank"> Activate this tab via URL </a>
                </p>
            </div>
            <div class="tab-pane" id="portlet_tab4">
                <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
                </p>
                <div class="alert alert-warning">
                    <p> There is a known issue where the dropdown menu appears to be a clipping if it placed in tabbed content. By far there is no flaxible fix for this issue as per discussion here:
                        <a target="_blank" href="https://github.com/twitter/bootstrap/issues/3661">
                            https://github.com/twitter/bootstrap/issues/3661 </a>
                    </p>
                    <p> But you can check out the below dropdown menu. Don't worry it won't get chopped out by the tab content. Instead it will be opened as dropup menu </p>
                </div>
                <div class="btn-group">
                    <a class="btn purple" href="javascript:;" data-toggle="dropdown">
                        <i class="fa fa-user"></i> Settings
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="dropdown-menu bottom-up">
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-plus"></i> Add </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-trash-o"></i> Edit </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-times"></i> Delete </a>
                        </li>
                        <li class="divider"> </li>
                        <li>
                            <a href="javascript:;"> Full Settings </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tab-pane" id="portlet_tab5">
                <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
                    ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                    et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo. </p>
                <p>
                    <a class="btn red" href="ui_tabs_accordions_navs.html#portlet_tab2" target="_blank"> Activate this tab via URL </a>
                </p>
            </div>
            <div class="tab-pane" id="portlet_tab6">
                <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
                    consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
                <p>
                    <a class="btn blue" href="ui_tabs_accordions_navs.html#portlet_tab3" target="_blank"> Activate this tab via URL </a>
                </p>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="barDemo">
    <a href="javascript:;" data-toggle="tooltip" data-placement="top" title="查看"><i class="iconfont icon-chakan1"></i></a>
    <a href="javascript:;" data-toggle="tooltip" data-placement="top" title="修改"><i class="iconfont icon-xiugai"></i></a>
    <a href="javascript:;" data-toggle="tooltip" data-placement="top" title="立即启动"><i class="iconfont icon-qidong"></i></a>
    <a href="javascript:;" data-toggle="tooltip" data-placement="top" title="监控"><i class="iconfont icon-jiankong"></i></a>
    <a href="javascript:;" data-toggle="tooltip" data-placement="top" title="作废"><i class="iconfont icon-zuofei"></i></a>
    <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
</script>

<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>

<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/layui/layui.all.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            ,url: 'layui_table.json'
            ,cols: [[
                {checkbox: true}
                ,{field:'id', title: '流程名称', minWidth:80,}
                ,{field:'username', title: '来源数据对象名', minWidth:80}
                ,{field:'sex', title: '来源表名', minWidth:80,}
                ,{field:'city', title: '来源数据源', minWidth:80}
                ,{field:'sign', title: '抽取方式', minWidth:80}
                ,{field:'experience', title: '运行频率', minWidth:80}
                ,{field:'score', title: '最后启动时间', minWidth:80}
                ,{field:'classify', title: '启用否', minWidth:80}
                ,{field:'wealth', title: '运行状态', minWidth:80}
                ,{width:200, align:'center', toolbar: '#barDemo',title:'操作'}
            ]]
            ,id: 'testReload'
            ,page: true
            ,height: 'full-150'
            ,done :function(){
              /*  console.log('hahha');
                var kk
                $('td[data-field="wealth"]').hover(function(e){
                    e.stopPropagation();
                    console.log($(this).offset().top);
                    console.log($(this).offset().left);
                    console.log($(this).parent().attr('data-index'));
                    kk = $(this).parent().attr('data-index');
                    $(document.body).append('<div class="lz'+kk+'" style="background: red;width: 200px;height: 80px;position: absolute;left: '+ $(this).offset().left+'px; top: '+($(this).offset().top - 80)+'px ;">haha</div>')
                },function(){
                    console.log($('.lz' + kk));
                    $('.lz'+kk).remove()
                })*/
            }
        });

        table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

    $(".dropdown-menu").on('click','a',function(){
        if($(this).hasClass('process_tb_copy')){
            layer.open({
                type : 2,
                content : ['tableCopy.html'],
                area: ['900px', '600px'],
                maxmin : true,
                title : '单表复制流程'
            })
        }else if($(this).hasClass('process_tb_map')){
            layer.open({
                type : 2,
                content : ['tableMap.html'],
                area: ['900px', '600px'],
                maxmin : true,
                title : '表映射流程'
            })
        }
    })
</script>
</body>

</html>